<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" type="text/css" />
    <style type="text/css" media="all">
      .title {
        margin: 5px 15px 4px;
        color: #6d6d72;
        font-size: 12px;
      }
      .mui-grid-view.mui-grid-9 .mui-media .mui-icon {
        font-size: 1.5em;
      }
      .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-top: 6px;
      }
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div id="slider" class="mui-slider" style="height: 120px;">
        <div class="mui-slider-group mui-slider-loop">
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="../images/yuantiao.jpg"></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="../images/shuijiao.jpg"></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="../images/muwu.jpg"></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="../images/apps/cbd.jpg"></a>
          </div>
          <div class="mui-slider-item">
            <a href="#"><img src="../images/yuantiao.jpg"></a>
          </div>
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="../images/shuijiao.jpg"></a>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <template v-repeat="group:menuGroups">
        <div class="title" v-cloak>
          {{group.name}}
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li v-repeat="menu:group.menus" v-on="tap: goTo({url: menu.href,id:menu.id||menu.href,autoShow: false,timeout:1000})" class="mui-table-view-cell mui-media mui-col-xs-3" v-cloak>
            <a>
              <span class="{{menu.icons|| 'mui-icon mui-icon-star'}}">
							<span v-show="menu.count" class="mui-badge">{{menu.count}}</span>
              </span>
              <div class="mui-media-body">{{menu.name}}</div>
            </a>
          </li>
        </ul>
      </template>
    </div>
    <script src="../js/mui.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../app/vue-html5.js"></script>
    <script type="text/javascript" charset="utf-8">
      (function($, window, document, Vue) {
        window.vm = vm = new Vue.PageVm({
          el: '.mui-content',
          name: 'page app',
          data: function() {
            return {
              menuGroups: localStorageJson('menuGroups')
            };
          },
          attached: function() {
            var gallery = $('.mui-slider');
            gallery.slider({
              interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
            });
          },
        });
      })(mui, window, document, Vue);
    </script>
  </body>

</html>